<template>
	<view>
		<u-tabbar :value="index" @change="tabBarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#0EAEDF">
			
			<u-tabbar-item text="首页">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[0].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[0].iconPath"></image>
				</template>
			</u-tabbar-item>

			<u-tabbar-item text="装备">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[1].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[1].iconPath"></image>
				</template>
			</u-tabbar-item>

			<u-tabbar-item  text="发布" @click="show = true">
				<template #active-icon>
					<image class="u-page__item__slot-icon-big" :src="list[2].selectedIconPath">
					</image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon-big" :src="list[2].iconPath"></image>
				</template>
			</u-tabbar-item>

			<u-tabbar-item text="消息"> 
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[3].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[3].iconPath"></image>
				</template>
			</u-tabbar-item>

			<u-tabbar-item text="我的">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[4].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[4].iconPath"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
		<view>
			<u-popup :overlayOpacity="0.6" :round="10" :show="show" @close="close" @open="open">
				<view class="issue-item">
					<view class="issue-item-buy" @click="toBuy">
						<text>我要卖</text>
					</view>
					<view class="issue-item-sell">
						<text>我要买</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:{
			index:{
				type:Number,
				default:0
			},
			
		},
		data() {
			return {
				show: false,
				list: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/tabbar/index.png",
						"selectedIconPath": "/static/tabbar/indexact.png",
						"text": "首页"
					}, {
						"pagePath": "/pages/equip/equip",
						"iconPath": "/static/tabbar/zb.png",
						"selectedIconPath": "/static/tabbar/zbact.png",
						"text": "装备"
					},
					{
						"pagePath": "/pages/publish/publish",
						"iconPath": "/static/tabbar/fabu.png",
						"selectedIconPath": "/static/tabbar/fabu.png",
						"text": "发布"
					},
					{
						"pagePath": "/pages/message/message",
						"iconPath": "/static/tabbar/message.png",
						"selectedIconPath": "/static/tabbar/mineact.png",
						"text": "消息"
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "/static/tabbar/mine.png",
						"selectedIconPath": "/static/tabbar/mineact.png",
						"text": "我的"
					}
				]

			}
		},
		
		onMounted(){ 
			
		},
		methods: {
			tabBarChange(e) {
				if (e !== 2) {
					uni.switchTab({
						url: this.list[e].pagePath
					})
				}
			},
			//点击发布按钮的弹出层
			open() {
				console.log('open');
			},
			close() {
				this.show = false;
				console.log('close');
			},
			//点击我要卖
			toBuy() {
				console.log("点击了");
				uni.switchTab({
					url: '/pages/issue/issue'
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.u-page__item__slot-icon-big {
		width: 95rpx;
		height: 95rpx;
		margin-bottom: 0rpx;
	} 

	.issue-item {
		height: 400rpx; 
		display: flex;
		justify-content: center;
		align-items: center;

		.issue-item-buy,
		.issue-item-sell {
			width: 30%;
			height: 100rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			background-color: pink;
			margin: 40rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>